import React from 'react'
import { Popover, Table, Pagination } from 'antd'
import '../batchRecord/search.css'
import styles from '@/components/batchRecord/table.scss'
import util from '@/utils'

const { Column } = Table

const UpStreamRecodTable = (props) => {
  const { 
    data,
    pageNum,
    pageSize,
    total,
    loading,
    onChangePagination,
  } = props

  return (
    <div>
      <Table 
        dataSource={data} 
        loading={loading}
        pagination={false} 
        rowKey={({id}) => id}
      >
        <Column title="消息编号" dataIndex="messageId" align="center" width={120} />
        <Column title="接入号" dataIndex="accessNumber" align="center" width={100} />
        <Column title="上行号码" dataIndex="phone" align="center" width={120} />
        <Column title="上行内容" dataIndex="content"  width={200} render={(props) => (
          <Popover content={props} trigger="click">
            <div className="single-line" style={{width: '400px'}}>
              {props}
            </div>
          </Popover>
        )}/>
        <Column title="上行时间" dataIndex="createTime" align="center" width={150} render={(props) => util.transformTimeStampToString(props)} />
      </Table>
      {!!total && <div className={styles["pagination-container"]}>
        <Pagination 
          className={styles["pagination"]} 
          showQuickJumper 
          showTotal={(total, range) => `共${total}条`} 
          pageSize={pageSize} 
          current={pageNum} 
          total={total} 
          onChange={onChangePagination} 
        />
      </div>
      }
    </div>
  )
}

export default UpStreamRecodTable